import './App.css';
// react-router-dom  react的路由插件
import React, { Component } from 'react';
class App extends Component {
  constructor(props) {
    super(props);
  }
  state = {
    count: 0
  }
  handleAdd = () => {
    // console.log(this.select.value);
    // 加法更新count的值
    this.setState({
      count: this.state.count + this.select.value * 1
    })
  }
  handleDecrement = () => {
    this.setState({
      count: this.state.count - this.select.value * 1
    })
  }
  handleOdd = () => {
    if (this.state.count % 2 == 1) {
      this.setState({
        count: this.state.count + this.select.value * 1
      })
    }
  }
  handleAsync = () => {
    setTimeout(() => {
      this.setState({
        count: this.state.count - this.select.value * 1
      })
    }, 1000)
  }

  render() {
    return (
      <div>
        <h1>app</h1>
        <h2>{this.state.count}</h2>
        <select ref={select => this.select = select}>
          <option value='1'>1</option>
          <option value='2'>2</option>
          <option value='3'>3</option>
        </select>
        <button onClick={this.handleAdd}>add +</button>
        <button onClick={this.handleDecrement}>decrement -</button>
        <button onClick={this.handleOdd}>odd Add</button>
        <button onClick={this.handleAsync}>async decrement</button>
      </div>
    );
  }
}

export default App;






